<template>
  <div class="preview">
    <div class="top_preview">
      <div class="title_box">
        <div class="title" style="text-align: left">已添加设施</div>

        <div
          class="clearAll"
          style="text-align: left"
          @click="clearAll()"
          v-show="showTreeComputed"
        >清空所有</div>
      </div>

      <!-- tree 组件 -->
      <div class="tree">
        <!-- 存在数据 -->
        <div v-if="showTreeComputed">
          <div v-for="(item, index) in fillData" :key="index">
            <div
              class="boundary_name"
              v-if="item.data.length > 0"
              style="text-align: left"
            >{{ item.boundaryName }}</div>

            <div class="boundary" v-for="(dataObj, dataIdx) in item.data" :key="dataIdx">
              <div
                class="accounting_entries_box"
                v-for="(entries, entriesIdx) in dataObj.dataList"
                :key="entriesIdx"
              >
                <div
                  class="accounting_entries"
                  v-if="
                    entries.fieldCode == 'net_consumption' &&
                    entries.defaultValue != ''
                  "
                >
                  <div class="name">
                    <div class="name_icon">
                      <a-popconfirm title="是否要删除该核算项？" @confirm="clearEntries(index, dataObj.id)">
                        <a-icon class="icon" type="close-square" />
                      </a-popconfirm>
                      <div>{{ dataObj.itemName }}</div>
                    </div>
                  </div>
                  <div class="value">{{ entries.defaultValue }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 暂无数据 -->
        <div v-else class="noData">
          <div>您还未添加任何数据</div>
        </div>
      </div>
    </div>
    <div class="btn_box">
          <a-button
              type="primary"
              icon="download"
              @click="handleExportXls('用户信息')"
              >添加设施</a-button
            >
            <a-button>
                发布核算任务
            </a-button>
      <!-- <div class="PreviewBtn" @click="preview(stepsCurrent - 1)">
        <div class="text">继续添加数据</div>
      </div>
      <div class="next" @click="step(stepsCurrent + 1)">发布核算任务</div> -->
    </div>
  </div>
</template>

<script>
import bus from "@/bus";
// import { Mixin } from "@/mixins/mixin.js";
export default {
//   mixins: [Mixin],
  data() {
    return {
      showLine: true,
      showIcon: false
    };
  },
  computed: {
    showTreeComputed() {
        return null
      let previewDataBloon = false;
      //   console.log(this.fillData);
      this.fillData.forEach((item, index) => {
        if (item.data.length > 0) {
          for (var i = 0; i < item.data.length; i++) {
            if (item.data[i]["net_consumption"] != "") {
              previewDataBloon = true;
            }
          }
        }
      });
      return previewDataBloon;
    }
  },
  methods: {
    clearEntries(index, id) {
      //   console.log(index, id);
      var targetObj = this.fillData[index]["data"].filter(item => {
        return item.id != id;
      });

      this.fillData[index]["data"] = targetObj;
    },
    clearAll() {
      this.fillData.forEach((item, index) => {
        item["data"] = [];
      });
    },
    preview() {
      bus.$emit("showPreviewFun", false);
    },
    step(step) {
      this.setStepsCurrent(step);
      bus.$emit("showPreviewFun", false);
    },
    onSelect(selectedKeys, info) {
      //   console.log("selected", selectedKeys, info);
    }
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .preview {
    .tree {
      padding: 10px 0;
      height: calc(100vh - 280px);
      overflow-y: auto;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      .noData {
        width: 100%;
        height: 100%;
        font-size: 16px;
        color: #9c9c9c;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .boundary_name {
        padding-top: 6px;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .boundary {
        .accounting_entries_box {
          padding: 0px 30px 0 14px;

          border-left: 1px solid rgb(233, 232, 232);
          .accounting_entries {
            line-height: 26px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .name {
              font-size: 12px;
              color: #333;
              .name_icon {
                display: flex;
                flex-direction: row;
                align-items: center;
                .icon {
                  font-weight: 400;
                  margin-right: 6px;
                  color: #ccc;
                  font-size: 18px;
                  cursor: pointer;
                  &:hover {
                    transition: 0.2s;
                    color: #50baf3;
                  }
                }
              }
            }
            .value {
              font-size: 12px;
              color: rgb(173, 173, 173);
            }
          }
        }
      }
    }
    .top_preview {
      .title_box {
        padding-bottom: 6px;
      }
      .title {
        margin: 0;
        font-weight: 700;
        font-size: 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
      }
      .clearAll {
        cursor: pointer;
        text-decoration: underline;
        color: #9c9c9c;
        font-size: 14px;
      }
    }
    .tree_box {
      padding-top: 10px;
      border-top: 1px solid #ececec;
    }
    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
    .preview {
    .tree {
      padding: 10px 0;
      height: calc(100vh - 280px);
      overflow-y: auto;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      .noData {
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: #9c9c9c;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .boundary_name {
        padding-top: 6px;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .boundary {
        .accounting_entries_box {
          padding: 0px 30px 0 14px;

          border-left: 1px solid rgb(233, 232, 232);
          .accounting_entries {
            line-height: 26px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .name {
              font-size: 12px;
              color: #333;
              .name_icon {
                display: flex;
                flex-direction: row;
                align-items: center;
                .icon {
                  font-weight: 400;
                  margin-right: 6px;
                  color: #ccc;
                  font-size: 18px;
                  cursor: pointer;
                  &:hover {
                    transition: 0.2s;
                    color: #50baf3;
                  }
                }
              }
            }
            .value {
              font-size: 12px;
              color: rgb(173, 173, 173);
            }
          }
        }
      }
    }
    .top_preview {
      .title_box {
        padding-bottom: 6px;
      }
      .title {
        margin: 0;
        font-weight: 700;
        font-size: 24px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
      }
      .clearAll {
        cursor: pointer;
        text-decoration: underline;
        color: #9c9c9c;
        font-size: 14px;
      }
    }
    .tree_box {
      padding-top: 10px;
      border-top: 1px solid #ececec;
    }
    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .preview {
    .tree {
      padding: 10px 0;
      height: calc(100vh - 280px);
      overflow-y: auto;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      .noData {
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: #9c9c9c;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .boundary_name {
        padding-top: 6px;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .boundary {
        .accounting_entries_box {
          padding: 0px 30px 0 14px;

          border-left: 1px solid rgb(233, 232, 232);
          .accounting_entries {
            line-height: 26px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .name {
              font-size: 12px;
              color: #333;
              .name_icon {
                display: flex;
                flex-direction: row;
                align-items: center;
                .icon {
                  font-weight: 400;
                  margin-right: 6px;
                  color: #ccc;
                  font-size: 18px;
                  cursor: pointer;
                  &:hover {
                    transition: 0.2s;
                    color: #50baf3;
                  }
                }
              }
            }
            .value {
              font-size: 12px;
              color: rgb(173, 173, 173);
            }
          }
        }
      }
    }
    .top_preview {
      .title_box {
        padding-bottom: 6px;
      }
      .title {
        margin: 0;
        font-weight: 700;
        font-size: 24px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
      }
      .clearAll {
        cursor: pointer;
        text-decoration: underline;
        color: #9c9c9c;
        font-size: 14px;
      }
    }
    .tree_box {
      padding-top: 10px;
      border-top: 1px solid #ececec;
    }
    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .preview {
    .tree {
      padding: 10px 0;
      height: calc(100vh - 280px);
      overflow-y: auto;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      .noData {
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: #9c9c9c;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .boundary_name {
        padding-top: 6px;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .boundary {
        .accounting_entries_box {
          padding: 0px 30px 0 14px;

          border-left: 1px solid rgb(233, 232, 232);
          .accounting_entries {
            line-height: 26px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .name {
              font-size: 12px;
              color: #333;
              .name_icon {
                display: flex;
                flex-direction: row;
                align-items: center;
                .icon {
                  font-weight: 400;
                  margin-right: 6px;
                  color: #ccc;
                  font-size: 18px;
                  cursor: pointer;
                  &:hover {
                    transition: 0.2s;
                    color: #50baf3;
                  }
                }
              }
            }
            .value {
              font-size: 12px;
              color: rgb(173, 173, 173);
            }
          }
        }
      }
    }
    .top_preview {
      .title_box {
        padding-bottom: 6px;
      }
      .title {
        margin: 0;
        font-weight: 700;
        font-size: 24px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
      }
      .clearAll {
        cursor: pointer;
        text-decoration: underline;
        color: #9c9c9c;
        font-size: 14px;
      }
    }
    .tree_box {
      padding-top: 10px;
      border-top: 1px solid #ececec;
    }
    .btn_box {
      border-top: 1px solid rgb(236, 236, 236);
      display: flex;
      flex-direction: row;
      justify-content: center;
      > div {
        margin: 10px 5px;
        width: 50%;
      }
      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
}
</style>